@charset "utf-8";

/* top-mainimage
--------------------------------------------------------------*/
.top-mainimage {
  position:relative;
  overflow:hidden;
  width:100%;
  height:100vh;
  background:url(../img/top-mainimage.jpg) no-repeat center center/cover;
  text-align:center;
}
.top-mainimage video {
  min-width:100%;
  min-height:100vh;
  z-index:1;
  position:absolute;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%);
}
.top-mainimage .overlay {
  width:100%;
  height:100vh;
  position:absolute;
  top:0;
  left:0;
  /*background-image:linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);*/
  background-image:url(../img/top/mainimage.png);
  background-size:2px 2px;
  z-index:2;
}
.top-mainimage .title-wrap {
  position:absolute;
  top:25vh;
  left:0;
  right:0;
  z-index:3;
}
.top-mainimage h1 {
  color:#fff;
  margin:auto;
  max-width:900px;
  width:100%;
  font-size:3.6rem;
  line-height:1.3;
}
.top-mainimage h1 .logo-hoop {
  display:block;
  margin-top:10px;
}
.top-mainimage h1 .logo-hoop img {width:100%;}
.top-mainimage h1 .title {font-size:2.4rem;}
.top-mainimage .point {
  margin: 20px auto 0;
  width:440px;
}
.top-mainimage .point img {width:100%;}
.top-mainimage .caution-btn {
	display: flex;
	justify-content: center;
	column-gap: 1em;
	margin-top: 80px;
}
.top-mainimage .caution-btn > div {width: 33vw;}
.top-mainimage .caution-btn a {
	text-decoration: none;
	display: block;
	box-sizing: border-box;
	border: solid 2px #e50012;
	background-color: #e50012;
	font-weight: bold;
	font-size: 2.0rem;
	line-height: 1.3;
	padding: 0.5em 0;
}
.top-mainimage .caution-btn a:hover {
	background-color: #fff;
	color: #e50012;
}

@media (orientation: landscape) and (max-width:1024px) {
	.top-mainimage .title-wrap {top:18vh;}
	.top-mainimage .caution-btn {margin-top: 60px;}
  .top-mainimage .caution-btn > div {width: 40vw;}
}

@media only screen and (max-width:900px) {
	.top-mainimage .title-wrap {top:20vh;}
  .top-mainimage h1 {width:90%;}
	.top-mainimage .caution-btn {display: block;}
  .top-mainimage .caution-btn div {width: 50%; margin: auto;}
  .top-mainimage .caution-btn div:not(:last-child) {margin-bottom: 1em;}
}
@media only screen and (max-width:480px) {
  .top-mainimage h1 {font-size:2.8rem;}
  .top-mainimage h1 .title {font-size:2.0rem;}
  .top-mainimage .point {width:75%;}
  .top-mainimage .caution-btn div {width: 90%; margin: auto;}
	.top-mainimage .caution-btn a {font-size: 1.8rem;}
}


/* news
--------------------------------------------------------------*/
.news-area{position:relative;}
.news-box{
  display:flex;
  width:1100px;
  margin:auto;
  background-color:#004097;
  position:absolute;
  top:-120px;
  left:0;
  right:0;
  z-index:5;
  height:60px;
  line-height:60px;
  overflow:hidden;
}
.news-box .news,
.news-box .list{
  width:140px;
  text-align:center;
  position:relative;
  font-size:18px;
}
.news-box .news{padding-right:10px;}
.news-box .list{padding-left:10px;}
.news-box .list a{
  color:#fff;
  text-decoration:none;
  display:block;
}
.news-box .list a:hover{color:#95bce5;}
.news-box .news::before,
.news-box .list::before{
  content:'';
  position:absolute;
  bottom:0;
}
.news-box .news::before{
  right:0;
  border-bottom:60px solid #fff;
  border-left:20px solid transparent;
}
.news-box .list::before{
  left:0;
  border-top:60px solid #fff;
  border-right:20px solid transparent;
}
.ticker{
  margin:0 auto;
  width:calc(100% - 300px);
  text-align:left;
  position:relative;
  overflow:hidden;
  background-color:#fff;
}
.ticker ul{
  width:100%;
  position:relative;
}
.ticker ul li{
  width:100%;
  display:none;
  height:60px;
}
.ticker ul li a{
  color:#333;
  text-decoration:none;
  padding:0 1em;
}
.ticker ul li a .date{margin-right:1.5em;}
.ticker ul li a:hover{color:#95bce5;}

@media only screen and (max-width:1100px) and (min-width:481px) {
  .news-box{width:90%;}
  .news-box .news,
  .news-box .list{width:100px;}
  .ticker{width:calc(100% - 220px);}
  .ticker ul li{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
  }
  .ticker ul li a{padding:0 0.5em;}
}
@media only screen and (max-width:480px) {
  .news-box{
    width:90%;
    display:block;
	height:140px;
	line-height:1.5;
	top:-165px;
	border-radius:7px;
  }
  .news-box .news{
    width:calc(100% - 15px);
	padding:10px 0 10px 15px;
	text-align:left;
  }
  .news-box .list{
    text-align:right;
    position:absolute;
    top:0;
	right:0;
	width:100%;
  }
  .news-box .news::before,
  .news-box .list::before{border:none;}
  .news-box .list a{
    position:absolute;
    top:0;
	right:0;
	padding:10px 15px;
  }
  .ticker{
    width:calc(100% - 30px);
	height:90px;
	padding:10px 15px;
  }
  .ticker ul{
    width:;
  }
  .ticker ul li{height:auto;}
  .ticker ul li a{
	display:block;
    width:calc(100% - 15px);
	padding:0;
  }
  .ticker ul li a .date{
    margin-right:0;
	display:block;
  }
}


/* lead
--------------------------------------------------------------*/
.lead-area{
  margin:0 auto 80px;
  background-color:#1a53a2;
  padding-bottom:100px;
}
.lead-box{
  width:900px;
  margin:auto;
  position:relative;
}
.lead-box img{width:100%;}
.lead-box .lead_01,
.lead-box .lead_02,
.lead-box .lead_type{
  position:absolute;
  right:0;
}
.lead-box .lead_01{
  font-size:3.4rem;
  top:130px;
}
.lead-box .lead_02{
  font-size:2.0rem;
  top:290px;
}
.lead-box .lead_type{
  top:212px;
  width:580px;
}
.lead-box .lead_type img{width:100%;}
.feature-box{
  width:1000px;
  margin:auto;
  background-color:#3982c4;
  position:relative;
}
.feature-box p{
  font-size:2.4rem;
  line-height:1.3;
  font-weight:bold;
  padding:1.5em 50px;
  width:22em;
}
.feature-box .feature_image{
  position:absolute;
  right:50px;
  top:-40px;
  width:210px;
}
.feature-box .feature_image img{width:100%;}

@media only screen and (max-width:1050px) {
  .lead-area{padding-bottom:10vw;}
  .lead-box{width:90%;}
  .feature-box{width:90%;}
  .lead-box .lead_01{
    top:13vw;
	font-size:3.5vw;
  }
  .lead-box .lead_02{
    top:29vw;
	font-size:2vw;
  }
  .lead-box .lead_type{
    top:21vw;
	width:65%;
  }
  .feature-box p{
    font-size:2.5vw;
	padding:1.5em 4vw;
  }
  .feature-box .feature_image{
	top:-4vw;
    right:4vw;
    width:24.5%;
  }
}


/* record
--------------------------------------------------------------*/
.record-area{
  text-align:center;
  position:relative;
  padding-top:50px;
  margin-bottom:30px;
}
.record-area .map{
  width:1236px;
  margin:0 auto;
}
.record-area .map img{width:100%;}
.record-area .text{
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.record-area h2{
  font-size:3.6rem;
  margin-bottom:10px;
}
.record-area .text p{font-size:2.0rem;}
.units_delivered{
  position:absolute;
  top:30%;
  left:50%;
}
.units_delivered .domestic,
.units_delivered .overseas{text-align:center;}
.units_delivered .overseas{display:flex;}
.units_delivered .record-box{width:220px;}
.units_delivered .record-box h3{font-size:2.2rem; line-height:1.2; margin-top:10px; margin-bottom:5px;}
.units_delivered .record-box .record{display:flex;}
.units_delivered .record-box .record li{width:110px;}
.units_delivered .record-box .record .head{font-weight:bold; font-size:2.0rem; line-height:1.2; margin-bottom:5px;}
.units_delivered .record-box .record .unit,
.units_delivered .record-box .record .company{
  background-color:#fff;
  color:#004097;
  font-weight:bold;
  line-height:1.0;
  width:80px;
  height:80px;
  border-radius:100px;
  position:relative;
  margin:auto;
}
.units_delivered .record-box .record .unit p,
.units_delivered .record-box .record .company p{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  font-size:1.6rem;
}
.units_delivered .record-box .record .unit span,
.units_delivered .record-box .record .company span{font-size:3.6rem;}
.units_delivered .record-box .record .suppl{font-size:1.2rem; margin-top:5px;}
.units_delivered .overseas .country{
  font-size:1.2rem;
  line-height:1.2;
  text-align:left;
  width:220px;
  padding-top:80px;
  margin-left:10px;
}
.units_delivered .overseas .country li{display:inline-block;}
.units_delivered .overseas .country li:not(:last-child)::after{content:'、';}

@media only screen and (max-width:1300px) {
  .record-area .map{width:90%;}
}
@media only screen and (max-width:1023px) {
  .units_delivered{
    position:relative;
	top:auto;
	left:auto;
	width:90%;
	margin:0 auto;
	display:flex;
	justify-content:center;
  }
}
@media only screen and (max-width:768px) {
  .record-area{padding-top:100px;}
  .record-area .text{width:90%; margin:0 auto;}
}
@media only screen and (max-width:480px) {
  .record-area{padding-top:0;}
  .record-area .text{position:relative;}
  .record-area h2{line-height:1.3;}
  .units_delivered{display:block;}
  .units_delivered .domestic{margin-bottom:20px;}
  .units_delivered .record-box,
  .units_delivered .overseas .country{margin:auto;}
  .units_delivered .overseas{display:block;}
  .units_delivered .overseas .country{padding-top:10px;}
}


/* go to effect
--------------------------------------------------------------*/
.link-effect{
  width:1100px;
  max-width:1100px;
  margin:0 auto 80px;
  text-align:center;
}
.link-effect p span{font-size:2.0rem;}
.link-effect p span::after{
  content:'＝';
  padding:0 .5em;
}
.link-effect p a{
  font-size:2.4rem;
  padding:15px 30px;
  background-color:#3982c4;
  border:solid 1px #fff;
  color:#fff;
  text-decoration:none;
}
.link-effect p a:hover{
  background-color:transparent;
  color:#fff;
}

@media only screen and (max-width:1100px) {
  .link-effect{
	width:90%;
	max-width:none;
  }
}
@media only screen and (max-width:480px) {
  .link-effect p span{
    display:block;
	margin-bottom:20px;
  }
}


/* language
--------------------------------------------------------------*/
.language{
  width:1100px;
  max-width:1100px;
  margin:0 auto 80px;
  display:flex;
  justify-content:space-between;
}
.language .text{width:47%;}
.language .text h2{
  font-size:2.4rem;
  border-top:solid 5px #fff;
  display:inline-block;
  padding-top:5px;
  margin-bottom:10px;
}
.language .image{width:49%;}
.language .image ul{
  display:flex;
  justify-content:space-between;
}
.language .image ul li{width:260px;}
.language .image ul li img{width:100%;}

@media only screen and (max-width:1100px) {
  .language{
	width:90%;
	max-width:none;
  }
}
@media only screen and (max-width:768px) {
  .language{display:block;}
  .language .text,
  .language .image{width:100%;}
  .language .text{margin-bottom:10px;}
  .language .image ul li{width:48%;}
}
@media only screen and (max-width:480px) {
  .language .image ul{display:block;}
  .language .image ul li{width:100%;}
  .language .image ul li:not(:last-child){margin-bottom:10px;}
}


/* use
--------------------------------------------------------------*/
.use-area{
  width:1000px;
  max-width:1100px;
  margin:0 auto 80px;
  background-color:rgba(255,255,255,.1);
  padding:50px;
}
.use-area h2{
  text-align:center;
  margin-bottom:30px;
}
.use-area ul{
  display:flex;
  justify-content:space-between;
  text-align:center;
}
.use-area ul li{width:32%;}
.use-area ul li .useImage{margin-bottom:5px;}
.use-area ul li .useImage img{width:100%;}

@media only screen and (max-width:1100px) {
  .use-area{
    width:calc(90% - 100px);
    max-width:none;
  }
}
@media only screen and (max-width:768px) {
  .use-area{
    width:calc(90% - 60px);
    padding:40px 30px 30px;
  }
}
@media only screen and (max-width:480px) {
  .use-area{
    width:calc(90% - 40px);
    padding:50px 20px 20px;
  }
  .use-area ul{display:block;}
  .use-area ul li{width:100%;}
	.use-area ul li:not(:last-child){margin-bottom:10px;}
}


/* point
--------------------------------------------------------------*/
.tech-area{
  background-color:#1a53a2;
  padding:80px 0;
  margin-bottom:80px;
}
.tech-area h2{
  font-size:3.6rem;
  text-align:center;
  margin-bottom:50px;
}
.point-area{
  width:1100px;
  max-width:1100px;
  margin:0 auto 80px;
}
.point-area ul{
  display:flex;
  justify-content:space-between;
}
.point-area ul li{width:47%;}
.point-area ul li .point{
  font-size:2.0rem;
  font-weight:bold;
  margin-bottom:10px;
}
.point-area ul li .point::before{
  content:'POINT';
  background-color:#fff;
  color:#004097;
  border-radius:5px;
  padding:2px 7px;
  margin-right:.5em;
}
.point-area ul li .text{margin-bottom:10px;}
.point-area ul li .pointImage{margin-bottom:5px;}
.point-area ul li .pointImage img{width:100%;}

@media only screen and (max-width:1100px) {
  .point-area{
	width:90%;
	max-width:none;
  }
  .point-area ul li .point::before{
    display:block;
	width:4em;
	text-align:center;
	margin:0 0 5px;
  }
}
@media only screen and (max-width:480px) {
	.point-area ul{display:block;}
	.point-area ul li{width:100%;}
	.point-area ul li:not(:last-child){margin-bottom:50px;}
}


/* tech
--------------------------------------------------------------*/
.nozzle-area{
  width:1000px;
  max-width:1000px;
  margin:0 auto;
  padding:50px;
  background-color:rgba(255,255,255,.8);
  color:#333;
}
.nozzle_lead{text-align:center;}
.nozzle_lead h3{
  background-color:#004097;
  font-size:3.0rem;
  height:50px;
  line-height:50px;
  color:#fff;
  margin-bottom:20px;
}
.nozzle_lead h3 span{
  font-weight:normal;
  font-size:1.8rem;
  border:solid 1px #fff;
  border-radius:100px;
  padding:2px 10px;
  vertical-align:middle;
  margin-left:1em;
}
.nozzle_lead h4{
  color:#f29600;
  font-size:2.4rem;
  line-height:1.3;
  margin-bottom:5px;
}
.nozzle_lead p{
  font-size:1.8rem;
  margin-bottom:5px;
}
.nozzle_lead p.invention{
  font-weight:bold;
  color:#3982c4;
  margin-bottom:20px;
}
.nozzle-patent{margin-bottom:50px;}
.nozzle-patent h3{
  font-size:1.8rem;
  border-left:solid 5px #3982c4;
  padding-left:10px;
  margin-bottom:10px;
}
.nozzle-patent .patentImage{width:100%;}
.nozzle-patent .patentImage img{width:100%;}
.nozzle-result{float:left; width:60%;}
.nozzle-award{float:right; width:34%;}
.nozzle-result h3{
  font-size:2.4rem;
  margin-bottom:10px;
}
.nozzle-result .resultList ul{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.nozzle-result .resultList ul li{
  width:48%;
  font-size:1.8rem;
}
.nozzle-result .resultList ul li::before{
  content:'●';
  color:#3982c4;
}
.nozzle-result .resultList ul .list1{order:1;}
.nozzle-result .resultList ul .list2{order:3;}
.nozzle-result .resultList ul .list3{order:5;}
.nozzle-result .resultList ul .list4{order:2;}
.nozzle-result .resultList ul .list5{order:4;}
.nozzle-result .resultList ul .list6{order:6;}
.nozzle-result .resultImage{
  display:flex;
  justify-content:space-between;
}
.nozzle-result .resultImage div{width:48%;}
.nozzle-result .resultImage div img{
  width:100%;
  margin-bottom:5px;
}
.nozzle-result .resultImage div{font-size:1.4rem;}
.nozzle-award h3{
  font-size:1.8rem;
  border-left:solid 5px #999;
  padding-left:10px;
  margin-bottom:10px;
}
.nozzle-award p{
  font-size:1.4rem;
  margin-bottom:10px;
}
.nozzle-award .awardImage{
  width:100%;
  margin-bottom:5px;
}
.nozzle-award .awardImage img{width:100%;}
.nozzle-award .awardUniv{text-align:right;}
.nozzle-award .awardUniv p{margin-bottom:5px;}
.nozzle-award .awardUniv .univLogo{width:100%;}
.nozzle-award .awardUniv .univLogo img{width:50%;}

@media only screen and (max-width:1100px) {
  .nozzle-area{
	width:calc(90% - 100px);
	max-width:none;
  }
}
@media only screen and (max-width:768px) {
  .nozzle-area{
	width:calc(90% - 40px);
	padding:20px;
  }
  .nozzle-result,
  .nozzle-award{float:none; width:100%;}
  .nozzle-result{margin-bottom:50px;}
  .nozzle-award{position:relative;}
  .nozzle-award .awardImage{width:60%;}
  .nozzle-award .awardUniv{
	width:38%;
	position:absolute;
	right:0;
	bottom:0;
  }
  .nozzle-award .awardUniv .univLogo img{width:75%;}
}
@media only screen and (max-width:480px) {
  .nozzle_lead h3{
	height:auto;
	line-height:1.5;
	padding:5px 0 10px;
  }
  .nozzle_lead h3 span{
	display:block;
	margin-right:1em;
  }
  .nozzle-result .resultList ul{display:block;}
  .nozzle-result .resultList ul li{width:100%;}
  .nozzle-result .resultImage{display:block;}
  .nozzle-result .resultImage div{
    width:100%;
	margin-top:20px;
  }
  .nozzle-award h3{
	border-left:none;
	border-top:solid 5px #999;
	padding-left:0;
	padding-top:5px;
  }
  .nozzle-award .awardImage{width:100%;}
  .nozzle-award .awardUniv{
	  width:100%;
	  position:relative;
  }
  .nozzle-award .awardUniv .univLogo img{width:50%;}
}


/* patent
--------------------------------------------------------------*/
.patent-area{
  width:1100px;
  max-width:1100px;
  margin:0 auto 80px;
  text-align:center;
  position:relative;
}
.patent-area h2{font-size:3.6rem; margin-bottom:10px;}
.patent-area .patent_subtitle{
  font-size:2.4rem;
  font-weight:bold;
  color:#e4e656;
  margin-bottom:10px;
}
.patent-area .patent_lead{margin-bottom:10px;}
.patent-area .patent_mwl{
  position:absolute;
  top:0;
  right:0;
  background-color:#fff;
  color:#004097;
  font-size:2.0rem;
  font-weight:bold;
  line-height:1.3;
  height:112px;
  width:240px;
  border-radius:120px 120px 120px 120px / 56px 56px 56px 56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.patent-area .patent_mwl::before{
  content:'';
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  border:1px solid #fff;
  position: absolute;
  top:-3px;
  left:-3px;
  border-radius:122px 122px 122px 122px / 58px 58px 58px 58px;
}
.patent-area h3{
  margin:30px auto 30px;
  font-size:2.4rem;
  position:relative;
  padding:0 65px;
}
.patent-area h3:before{
  position:absolute;
  top:calc(50% - 1px);
  left:0;
  width:100%;
  height:1px;
  content:'';
  background-color:rgba(255,255,255,.5);
}
.patent-area h3 span{
  position:relative;
  padding:0 1em;
  background-color:#004097;
}
.patentList{
  display:flex;
  justify-content:center;
}
.patentList li{
  font-size:1.4rem;
  width:25%;
  margin-bottom:10px;
}
.patentList li .image{
  width:160px;
  margin:0 auto 5px;
}
.patentList li .image img{width:100%;}

@media only screen and (max-width:1100px) {
  .patent-area{
	width:90%;
	max-width:none;
  }
}
@media only screen and (max-width:768px) {
  .patent-area .patent_subtitle{text-align:left;}
  .patent-area .patent_lead{text-align:left;}
  .patent-area .patent_mwl{top:70px;}
  .patentList{flex-wrap:wrap;}
  .patentList li{width:50%;}
  .patentList li .image{width:80%;}
}
@media only screen and (max-width:480px) {
  .patentList li{width:100%;}
  .patentList li:not(:last-child){margin-bottom:30px;}
  .patentList li .image{width:75%;}
  .patent-area .patent_mwl{
    position:relative;
	top:auto;
	margin:0 auto;
  }
}


/* reduction
--------------------------------------------------------------*/
.reduction-area{
  width:900px;
  max-width:900px;
  margin:0 auto 80px;
  padding:100px;
  background-color:rgba(255,255,255,.1);
  text-align:center;
  font-weight:bold;
}
.reduction-area .case{font-size:1.8rem;}
.reduction-area h2{
  font-size:3.6rem;
  color:#e4e656;
  margin-bottom:30px;
}
.reduction-area ul li:not(:last-child){margin-bottom:30px;}
.reduction-area .reduction{
  font-size:2.4rem;
  background-color:#3982c4;
  border-radius:100px;
  height:100px;
  line-height:100px;
  margin-bottom:10px;
}
.reduction-area .reduction span{
  font-size:3.6rem;
  color:#e4e656;
  padding:0 0.2em;
}
.reduction-area .formula{
  font-weight:bold;
  font-weight:normal;
}

@media only screen and (max-width:1100px) {
  .reduction-area{
	width:calc(90% - 100px);
	max-width:none;
	padding:50px;
  }
}
@media only screen and (max-width:768px) {
  .reduction-area h2{
    line-height:1.3;
	margin-top:5px;
  }
  .reduction-area .reduction{
	height:auto;
	line-height:1.3;
	padding:10px 0;
  }
}
@media only screen and (max-width:480px) {
  .reduction-area{
	width:calc(90% - 40px);
	padding:20px;
  }
  .reduction-area h2{font-size:3.0rem;}
  .reduction-area .reduction{border-radius:0; font-size:1.8rem;}
  .reduction-area .reduction span{display:block; font-size:3.0rem;}
}

/* comparison
--------------------------------------------------------------*/
.comparison-area{
  width:1100px;
  max-width:1100px;
  margin:0 auto 80px;
  background-color:rgba(255,255,255,.8);
  color:#333;
  text-align:center;
}
.comparison_now,
.comparison_hoop{padding-bottom:30px;}
.comparison_now h2,
.comparison_hoop h2{
  background-color:#fff;
  height:40px;
  line-height:40px;
  color:#fff;
  font-size:2.0rem;
  text-align:left;
  margin-bottom:30px;
}
.comparison_now h2 span,
.comparison_hoop h2 span{
  height:40px;
  display:inline-block;
  padding:0 15px;
  width:calc(50% - 30px);
  position:relative;
}
.comparison_now h2 span{background-color:#999;}
.comparison_hoop h2 span{background-color:#e50012;}
.comparison_now h2 span::before,
.comparison_hoop h2 span::before{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  border-bottom:40px solid #fff;
  border-left:15px solid transparent;
}
.comparison_now ul,
.comparison_hoop ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:30px;
}
.comparison_now ul li,
.comparison_hoop ul li{
  margin:0 15px;
  font-size:2.0rem;
  font-weight:bold;
}
.comparison_now ul li span,
.comparison_hoop ul li span{
  margin:0 5px;
  text-align:center;
  background-color:#fff;
  border-radius:5px;
  display:inline-block;
}
.comparison_now ul li span{border:solid 2px #999;}
.comparison_hoop ul li span{border:solid 2px #e50012; color:#e50012;}
.comparison_now ul li:nth-child(1) span,
.comparison_hoop ul li:nth-child(1) span{width:130px;}
.comparison_now ul li:nth-child(2) span,
.comparison_hoop ul li:nth-child(2) span{width:160px;}
.comparison_now ul li:nth-child(3) span,
.comparison_hoop ul li:nth-child(3) span{width:220px;}
.comparison_now ul li:nth-child(3) span{color:#e50012;}
.comparisonImage{
	width:90%;
	max-width:728px;
	margin:0 auto;
}
.comparisonImage img{width:100%;}
.comparison_now .suppl{margin-top:20px;}

@media only screen and (max-width:1100px) {
  .comparison-area{
	width:90%;
	max-width:none;
  }
}
@media only screen and (max-width:768px) {
  .comparison_now ul,
  .comparison_hoop ul{
	margin:0 15px 30px;
	text-align:left;
	justify-content:space-between;
  }
  .comparison_now ul li,
  .comparison_hoop ul li{margin:0 0 5px 0;}
}
@media only screen and (max-width:480px) {
  .comparison_now h2 span,
  .comparison_hoop h2 span{width:calc(90% - 30px);}
  .comparison_now ul li:nth-child(1) span,
  .comparison_hoop ul li:nth-child(1) span,
  .comparison_now ul li:nth-child(2) span,
  .comparison_hoop ul li:nth-child(2) span,
  .comparison_now ul li:nth-child(3) span,
  .comparison_hoop ul li:nth-child(3) span{
    width:auto;
	padding:0 5px;
  }
  .comparison_hoop ul li:nth-child(3) span{letter-spacing:-2px;}
}


/* product
--------------------------------------------------------------*/
.product-area{
  margin:0 auto 80px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.hoopBox{
  width:33%;
  padding:80px 0;
  text-align:center;
}
.otherBox{
  width:calc(34% - 100px);
  padding:80px 50px;
  text-align:center;
  background-color:#98dcd5;
  color:#333;
}
.autoBox{background-color:#e4e656; color:#333;}
.manualBox{background-color:#3982c4;}
.hoopBox .title,
.otherBox .title{
  font-size:2.4rem;
  margin:0 auto 20px;
  position:relative;
  width:90%;
  max-width:470px;
}
.hoopBox .title::before,
.otherBox .title::before{
  position:absolute;
  bottom:9px;
  left:0;
  right:0;
  content:'';
  width:470px;
  height:39px;
  display:inline-block;
	background-position: center;
  background-repeat:no-repeat;
  background-size:contain;
}
.autoBox .title::before{background-image:url(../img/top/product_automatic.svg);}
.manualBox .title::before{background-image:url(../img/top/product_manual.svg);}
.otherBox .title::before{background-image:url(../img/top/product_other.svg);}
.hoopBox .title::after,
.otherBox .title::after{
  content:'';
  display:block;
  height:5px;
  width:48px;
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
}
.autoBox .title::after{background-color:#333;}
.manualBox .title::after{background-color:#fff;}
.otherBox .title::after{background-color:#333;}
.hoopBox .copy{
  font-size:1.8rem;
  font-weight:bold;
  margin-bottom:20px;
}
.hoopBox ul{
  display:flex;
  justify-content:center;
}
.hoopBox ul li{
  /*width:50%;*/
  position:relative;
  /*width:44.142%;*/
}
.hoopBox .newIcon{
  position:absolute;
  top:0;
  left:15%;
  width:70px;
}
.hoopBox .newIcon img{
  width:100%;
}
.hoopBox .productPhoto{
  width:80%;
  margin:0 auto 20px;
}
.hoopBox .productPhoto img{width:100%;}
.hoopBox .model{
  font-size:3.2rem;
  margin-bottom:20px;
}
.hoopBox .linkBtnProduct a,
.otherBox .linkBtnProduct a{
  text-decoration:none;
  display:inline-block;
  width:240px;
  height:60px;
  line-height:60px;
  font-size:1.8rem;
  box-sizing:border-box;
}
.autoBox .linkBtnProduct a{
  background-color:#333;
  color:#fff;
  border:solid 1px #333;
}
.manualBox .linkBtnProduct a{
  background-color:#fff;
  color:#333;
  border:solid 1px #fff;
}
.autoBox .linkBtnProduct a:hover{
  background-color:transparent;
  color:#333;
}
.manualBox .linkBtnProduct a:hover{
  background-color:transparent;
  color:#fff;
}
.otherBox ul li{
  display:flex;
  margin-top:100px;
  justify-content:space-between;
  align-items:center;
}
.otherBox .productText{
  width:70%;
  text-align:left;
  order:1;
}
.otherBox .catch{
  margin-bottom:15px;
  font-weight:bold;
  line-height:1.3;
}
.otherBox .catch span{font-size:2.4rem;}
.otherBox .model{margin-bottom:30px; width:90%;}
.otherBox .model img{width:100%;}
.otherBox .model.sheetmetal{max-width:340px;}
.otherBox .model.mwbeam{max-width:350px;}
.otherBox .productPhoto{width:30%; order:2;}
.otherBox .productPhoto img{width:100%;}
.otherBox .linkBtnProduct a{
  color:#fff;
  background-color:#004097;
  border:solid 1px #004097;
  text-align:center;
}
.otherBox .linkBtnProduct a:hover{
  background-color:transparent;
  color:#004097;
}

.slide-arrow{cursor:pointer; padding:0 10px;}
.slide-arrow.prev-arrow{margin-left:20px;}
.slide-arrow.next-arrow{margin-right:20px;}

@media only screen and (max-width:1580px) {
  .hoopBox{width:50%;}
  .otherBox{width:calc(100% - 100px);}
  .otherBox ul{
	display:flex;
	justify-content:space-between;
  }
  .otherBox ul li{margin-top:50px;}
  .otherBox ul li:nth-child(1){margin-right:25px;}
  .otherBox ul li:nth-child(2){margin-left:25px;}
}
@media only screen and (max-width:768px) {
  .product-area{display:block;}
  .hoopBox{width:100%;}
  .otherBox .title,
  .hoopBox .title::before,
  .otherBox .title::before{width:100%;}
  .hoopBox .newIcon{
	left:15%;
	width:35px;
  }
  .otherBox ul{display:block;}
  .otherBox ul li:nth-child(1){margin-right:0;}
  .otherBox ul li:nth-child(2){margin-left:0;}
  .slide-arrow.prev-arrow{margin-left:0;}
  .slide-arrow.next-arrow{margin-right:0;}
}
@media only screen and (max-width:480px) {
  .otherBox{width:calc(100% - 40px); padding:80px 20px;}
  .otherBox ul li{display:block;}
  .otherBox .productText{width:100%;}
  .otherBox .productPhoto{width:70%; margin:0 auto 10px;}
  .otherBox .linkBtnProduct{text-align:center;}
}


/* showroom
--------------------------------------------------------------*/
/* showroom */
.showroom-area{
  width:1000px;
  max-width:1000px;
  margin:0 auto 80px;
  padding:50px;
  background-color:rgba(255,255,255,.1);
}
.showroom-area h2{
  text-align:center;
  font-size:3.6rem;
  margin-bottom:30px;
}
.showroom-area .showroomBox,
.showroom-area .sampleBox{
  display:flex;
  justify-content:space-between;
}
.showroom-area .showroomBox{
  padding-bottom:50px;
  margin-bottom:50px;
  border-bottom:solid 1px #95bce5;
}
.showroom-area .showroomLeft{width:50%;}
.showroom-area .showroomRight{width:46%;}
.showroom-area .showroomBox .photo{margin-bottom:10px;}
.showroom-area .showroomBox .photo img{width:100%;}
.showroom-area .showroomBox h3{
  font-size:2.4rem;
  margin-bottom:5px;
}
.showroom-area .showroomBox .suppl{
  font-size:1.4rem;
  text-indent:-1em;
  margin-left:1em;
  margin-top:5px;
}
.showroom-area .showroomRight img{width:100%;}
/* sample */
.showroom-area .sampleBox h3{
  font-size:2.4rem;
  margin-bottom:10px;
}
.showroom-area .sampleLeft{width:46%;}
.showroom-area .sampleRight{width:50%;}
.showroom-area .sampleBox .example{margin-top:10px;}
.showroom-area .sampleBox .example span{
  font-size:1.4rem;
  margin-left:1em;
}
.showroom-area .sampleBox .exampleBox{
  display:flex;
  justify-content:space-between;
  margin-top:5px;
}
.showroom-area .sampleBox .material{margin-left:1em;}
.showroom-area .sampleBox .sampleSet{width:48%;}
.showroom-area .sampleBox .sampleSet img{width:100%;}
.showroom-area .sampleBox .process{
  font-size:1.8rem;
  font-weight:bold;
  color:#e4e656;
  margin-bottom:10px;
}
.showroom-area .sampleBox .sampleLink a{
  display:block;
  background-color:#fff;
  border:solid 1px #fff;
  width:50%;
  height:60px;
  line-height:60px;
  text-align:center;
  color:#004097;
  font-size:2.0rem;
  font-weight:bold;
  text-decoration:none;
  margin:20px auto 0;
}
.showroom-area .sampleBox .sampleLink a:hover{
  background-color:transparent;
  color:#fff;
}

@media only screen and (max-width:1100px) {
  .showroom-area{
	width:calc(90% - 100px);
	max-width:none;
  }
}
@media only screen and (max-width:768px) {
  .showroom-area .showroomBox,
  .showroom-area .sampleBox{display:block;}
  .showroom-area .showroomLeft{width:100%; margin-bottom:30px;}
  .showroom-area .showroomRight{width:100%;}
  .showroom-area .sampleLeft{width:100%; margin-bottom:50px;}
  .showroom-area .sampleRight{width:100%;}
}
@media only screen and (max-width:480px) {
  .showroom-area .sampleBox .sampleLink a{width:100%;}
  .showroom-area{
	width:calc(90% - 40px);
	padding:20px;
  }
  .showroom-area h2{line-height:1.3;}
  .showroom-area .showroomBox h3{line-height:1.3;}
  .showroom-area .sampleBox h3{line-height:1.3;}
  .showroom-area .sampleBox .exampleBox{display:block;}
  .showroom-area .sampleBox .sampleSet{width:100%;}
}